<template>
  <div>
    <van-form>
      <van-field
        v-model="sysVaccineVo.vaccineName"
        name="疫苗名称"
        label="疫苗名称"
        placeholder="请输入想要查询的疫苗名称"
      />
      <van-field
        v-model="sysVaccineVo.vaccineClassification"
        name="疫苗类别"
        label="疫苗类别"
        placeholder="请输入想要查询的疫苗类别"
      />
      <van-field
        v-model="sysVaccineVo.province"
        name="省"
        label="省"
        placeholder="请输入省份"
      />
      <van-field
        v-model="sysVaccineVo.city"
        name="市"
        label="市"
        placeholder="请输入城市"
      />
      <van-field
        v-model="sysVaccineVo.county"
        name="区"
        label="区"
        placeholder="请输入区或乡镇"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" @click="fetchData()">查询疫苗</van-button>
      </div>
    </van-form>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="fetchData"
    >
      <van-cell v-for="item in list" :key="item.id" center :title="item.vaccineName" :label="item.hospitalName">
        <template #right-icon>
          <van-tag round type="danger">剩余库存{{ item.vaccineNumber }}</van-tag>
          <router-link :to="'/reservation/'+item.id">
            <van-button v-if="item.vaccineNumber!=0" type="primary">预约</van-button>
          </router-link></template>
      </van-cell>
    </van-list>

  </div>
</template>

<script>
import vaccineApi from '@/api/vaccine'

export default {
  data() {
    return {
      sysVaccineVo: {
        vaccineName: '',
        vaccineClassification: '',
        province: '',
        city: '',
        county: ''
      },

      value: '',
      list: null,
      loading: false,
      finished: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      vaccineApi.search(this.sysVaccineVo)
        .then(response => {
          this.list = response.data.rows
        })
      this.finished = true
    },
    resetData() {
      this.searchObj = {}
      this.fetchData()
    }
  }

}
</script>

<style scoped>

</style>
